<template>
  <div class="hotword">
    <el-row>
      <el-col :span="12" class="title">
        <span>热词图</span>
      </el-col>
      <el-col :span="12">
        <!-- <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1">图显示</el-menu-item>
          <el-menu-item index="2">列表显示</el-menu-item>
        </el-menu> -->
      </el-col>
    </el-row>
    <div class="chart-hotword" ref="hotword">
    </div>
  </div>

</template>

<script>
import echarts from 'echarts'
require('echarts-wordcloud')
export default {
    name: 'hotword',
    components: {
    },
    data () {
        return {
            chart_dom: null,
            postData: []
        }
    },
    mounted () {
        this.$root.Bus.$on('setHeatwords', (data) => {
            if (data.length > 0) {
                this.postData = data.map((item, index) => {
                    return {
                        name: item,
                        value: index
                    }
                })
            } else {
                this.postData = [{name: '暂无数据', value: 0}]
            }
            this.init()
        })
    },
    methods: {
        init () {
            this.chart_dom = echarts.init(this.$refs.hotword)
            let option = {
                tooltip: {},
                series: [{
                    type: 'wordCloud',
                    gridSize: 2,
                    sizeRange: [12, 48],
                    rotationRange: [-90, 90],
                    shape: 'pentagon',
                    width: 600,
                    height: 400,
                    drawOutOfBound: true,
                    textStyle: {
                        normal: {
                            color: function () {
                                return 'rgb(' + [
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160)
                                ].join(',') + ')'
                            }
                        },
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    data: this.postData
                }]
            }
            this.chart_dom.setOption(option)
        },
        resize () {
            if (this.postData.length > 0) {
                this.$nextTick(() => {
                    this.chart_dom.resize()
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.hotword {
	width: 100%;
	background: #fff;
	margin-bottom: 10px;
	height: 320px;
	.title {
		padding: 10px 10px;
	}
	.el-menu--horizontal {
		border-bottom: none;
		.el-menu-item {
			float: right;
			line-height: 32px;
			height: 32px;
		}
	}
	.chart-hotword {
		height: 100%;
    line-height: 300px;
    text-align: center;
	}
}
</style>
